<html>

<head>
    <title>下拉列表</title>
    <link rel="stylesheet" href="css/combobox.css" type="text/css" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/jquery-combobox.js"></script>
    <style>
        body {
            background-color: #A7B3BD;
        }
    </style>
</head>

<body>



    <span class="combobox" id="test"></span>
    <button id="getvalue">得到值</button>
    <script>
        var id =10;
        $("#test").combobox({
            valueField: 'id',
            textField: 'name',
            panelHeight:'auto',
            width:'auto',
            notNull:false,
            data: [{
                "id": 1,
                "name": "客户关怀服务部"
            }, {
                "id": 2,
                "name": "互联网事业部"
            }, {
                "id": 3,
                "name": "产品部"
            }, {
                "id": 4,
                "name": "综合管理办公室"
            }],
            prefixText: '请选择部门',
            onLoadSuccess: function(data) {
                console.info("onLoadSuccess!");
            },
            onChange:function(newValue,oldValue){
                console.info("onChange");
            },
            onSelect:function(record){
                console.info("onSelect");
            },
            onUnSelect:function(record){
                console.info("onUnSelect");
            }
        }).combobox("loadData", [{
            "id": 1,
            "name": "客户关怀服务部"
        }, {
            "id": 2,
            "name": "互联网事业部"
        }, {
            "id": 3,
            "name": "产品部"
        }, {
            "id": 4,
            "name": "综合管理办公室"
        },
        {
            "id": 5,
            "name": "云事业部"
        },
        {
            "id": 6,
            "name": "智能化工程部",
            selected:true
        }]);
        $("#getvalue").on("click",function(){
            alert($("#test").combobox("getValue")+$("#test").combobox("getText"));
        });

    </script>
</body>

</html>
